<template>
  <div>
    <el-table
      border
      :data="areaOperationList"
      class="borderTables"
      :span-method="objectSpanMethod"
    >
      <el-table-column label="省" align="center" prop="provinceName">
      </el-table-column>
      <el-table-column
        label="任务名称"
        align="center"
        prop="ypgTaskName"
      ></el-table-column>
      <el-table-column
        label="面积（平方米）"
        align="center"
        prop="area"
      ></el-table-column>
      <el-table-column
        label="面积占比"
        align="center"
        prop="areaRatio"
      >
        <template #default="{row}">
          <span v-if="row.showAreaRatio">{{row.areaRatio}}</span>
          <span v-else>——</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { dataMethod } from "@/utils/spanTable.js";
import { onMounted } from "vue";
const props = defineProps({
  areaOperationList: {
    default: [],
    type: Array,
  },
  isTableEdit: {
    type: Boolean,
    default: false,
  },
});
const spanObj = ref();
const { areaOperationList } = toRefs(props);
watch(
  () => areaOperationList.value,
  () => {
    spanObj.value = dataMethod(areaOperationList.value, ["provinceName"]);
    areaOperationList.value.map(item => {
      if(areaOperationList.value.filter(val => val.provinceId == item.provinceId).length > 1){
        item.showAreaRatio = true
      }
      return item
    })
  }
);
// 面积占比表格合并
function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  //判断合并列
  // console.log(column)
  const _row = spanObj.value[column.property]
    ? spanObj.value[column.property][rowIndex]
    : 1;
  const _col = _row > 0 ? 1 : 0;
  return {
    rowspan: _row,
    colspan: _col,
  };
}
onMounted(()=>{
    spanObj.value = dataMethod(areaOperationList.value, ["provinceName"]);
    
})
</script>
<style lang="scss" scoped>
.borderTables {
  margin: 20px 0;
  box-sizing: border-box;
}
</style>
